<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>气罐二维码查看</title>
    <style>
          * {
              margin: 0px;
              padding: 0px;
          }

        .code-query {
            margin-top: 30px;
        }

        .logo-content {
            font-family:"微软雅黑","黑体",sans-serif;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="code-content" style="width: 130px;background: #FFF;padding-left: 4px;display: none">
        <div style="overflow: hidden;width: 130px">
            <p style="float: left"><img src="images/logo.png" ></p>
            <p style="float: left"><img src="" width="60px" height="60px" id="qr-code"></p>
        </div>
        <p style="margin: 0px 0px 0px -9px"><img src="" alt="" width="140px" height="52px" id="barcode"></p>
    </div>
    <div class="code-query">
        <button onclick="getCodeImage()">查看条形码图片</button>
        <input type="text" id="range-begin">-
        <input type="text" id="range-end">
    </div>
    <!--<div>-->
        <!--<h4 class="logo-content">九江煤气</h4>-->
    <!--</div>-->
    <br>
</div>


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script>

    var w = 130;
    var h = 120.9;

    var canvas = document.createElement("canvas");
    canvas.width = w * 2;
    canvas.height = h * 2;
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";
    var context = canvas.getContext("2d");
    var blobs = [];
    var codes = [];

    //然后将画布缩放，将图像放大两倍画到画布上
    context.scale(2,2);


    var doCanvas = function(len,tankBarcode, index) {

        if (tankBarcode === undefined) {
            blobs = [];
            codes = [];
            return;
        }

        $("#qr-code").attr("src","images/" + tankBarcode + "/QRCode.jpg");
        $("#barcode").attr("src","images/" + tankBarcode + "/barcode.jpg");

        html2canvas($(".code-content"),{ // $(".myImg")是你要复制生成canvas的区域，可以自己选
            canvas: canvas,
            onrendered:function(canvas){
                dataURL = canvas.toBlob(function (blob) {
                    uploadImage(blob, tankBarcode, len, index);
                })

                $(".code-content").append(canvas);

                //下载图片
                $('#down_button').attr( 'href' ,  dataURL ) ;
            },
            width:320,
            height:400
        })
    }

    var uploadImage = function(blob,tankBarcode,len,index) {

        console.log(index + "::" + tankBarcode)

        var formData = new FormData();

        formData.append("files",blob, tankBarcode + ".jpg");

        $.ajax({
            url: 'gas-tank/code/image/upload',
            type: 'POST',
            cache: false, //上传文件不需要缓存
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                if(data.success){
                    if (blobs.length < len) {
                        blobs.push(blob);
                        doCanvas(len,codes[index + 1],index + 1);
                    }
                }else{
                    alert(data.errorMessage)
                }
            },
            error:function (data) {
                alert(data)
            }
        })
    }

    var getCodeImage = function() {

        var begin = $("#range-begin").val();
        var end = $("#range-end").val();
        $(".code-content").show();

        if (begin === undefined || end === undefined) {
            return;
        }

        $.ajax({
            type:"POST",
            url:"gas-tank/code/info",
            contentType: "application/json",
            data: JSON.stringify({'begin' : begin, 'end' : end}),
            success:function(data) {
                if (data.success) {
                    console.log("开始绘制")

                    var first = data.data[0].tankBarcode;

                    $("#qr-code").attr("src","images/" + first + "/QRCode.jpg");
                    $("#barcode").attr("src","images/" + first + "/barcode.jpg");

                    for (var i = 0;i < data.data.length;i++) {
                        codes.push(data.data[i].tankBarcode)
                    }

                    doCanvas(data.data.length,first,0);
                }
            }

        })
    }
</script>
</body>
</html>